<template>
  <div class="container" style="height: 100%" @click="allIfreamHide">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item>
          <div class="div1">商品管理</div>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <div class="div2">品牌管理</div>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content">
      <h2>品牌管理</h2>
      <h3>数据筛选</h3>
      <el-form
        :inline="true"
        ref="form"
        :model="queryForm"
        label-width=""
        size="mini"
      >
        <el-form-item label="品牌名称" prop="name">
          <el-input
            placeholder="请输入品牌名称"
            v-model.trim="queryForm.name"
            :maxlength="30"
          ></el-input>
        </el-form-item>

        <el-form-item label="英文名" prop="fenName">
          <el-input
            v-model.trim="queryForm.endangerName"
            placeholder="请输入英文名"
            :maxlength="30"
            @keyup.native="
              queryForm.endangerName = queryForm.endangerName.replace(
                /[^a-zA-Z]/g,
                ''
              )
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="关联商户号">
          <el-select
            v-model="queryForm.defWechatMchId"
            placeholder="选择关联商户号"
            filterable
            clearable
            default-first-option
            @change="handleSelect"
          >
            <el-option
              v-for="item in brandList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属类目：">
          <el-cascader
            clearable
            v-model="queryForm.id"
            :options="options"
            :props="{
              label: 'categoryName',
              value: 'id',
              checkStrictly: true,
            }"
            @change="handleChangeSearch"
          ></el-cascader>
        </el-form-item>
        <!-- <el-form-item label="上下架">
            <el-select
              v-model="queryForm.states"
              placeholder="选择平台分类"
              filterable
              clearable
              default-first-option
            >
              <el-option
                v-for="itemsS in states"
                :key="itemsS.status"
                :value="itemsS.status"
                :label="itemsS.value"
              ></el-option>
            </el-select>
          </el-form-item> -->

        <el-form-item>
          <el-button
            size="mini"
            type="primary"
            @click="searchEvent"
            v-on:keyup.enter="searchEvent"
            >搜索</el-button
          >
          <el-button size="mini" plain @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="manage">
      <div style="display: flex; justify-content: space-between">
        <p class="header">管理品牌</p>
        <el-button
          type="primary"
          size="mini"
          @click="addCommercial(1)"
          style="width: 120px; height: 36px"
          v-if="parArray.indexOf('addTrademark') != -1"
          >新增品牌</el-button
        >
        <!-- <el-button type="primary" size="mini" @click="batch(2)"
          >批量关联商户号</el-button
        > -->
      </div>
      <div class="table" @click="allIfreamHide">
        <el-table
          :header-cell-style="{ background: '#f8f8f8' }"
          :data="dataList"
		  v-loading="loading"
        >
          <!-- <el-table-column label="品牌logo">
          <template slot-scope="props">
            <img :src="props.row.logo" />
          </template>
        </el-table-column> -->
          <el-table-column label="品牌名称" min-width="120px">
            <template slot-scope="props">
              <div style="cursor: pointer">
                <span> {{ props.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="品牌英文名" min-width="120">
            <template slot-scope="props">
              <p style="cursor: pointer">
                {{ props.row.endangerName }}
              </p>
            </template>
          </el-table-column>
          <!-- <el-table-column label="上/下架" min-width="120">
          <template slot-scope="props">
            <p :class="props.row.status == 0 ? 'activess' : 'active'">
              {{ props.row.status == 0 ? "已上架" : "已下架" }}
            </p>
          </template>
        </el-table-column> -->
          <el-table-column label="关联商户号" min-width="120">
            <template slot-scope="props">
              {{ props.row.defWechatMchName }}
            </template>
          </el-table-column>
          <!-- <el-table-column label="所属公司" min-width="120">
          <template slot-scope="props">
            {{ props.row.defWechatMchName }}
          </template>
        </el-table-column> -->
          <el-table-column label="所属类目" min-width="120">
            <template slot-scope="props">
              <!-- <div
              v-for="(item, index) in props.row.commodityCategoryList"
              :key="index"
            >
              <p>{{ item == null ? "" : item.categoryName }}</p>
            </div> -->
              {{ getTextByJs(props.row.commodityCategoryList) }}
            </template>
          </el-table-column>
          <el-table-column label="更新时间" min-width="120">
            <template slot-scope="props">
              <p>{{ $moment(props.row.updatedTime) }}</p>
              <!-- <p>{{}}</p> -->
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" min-width="100">
            <template slot-scope="props">
              <el-button
                @click="handleClick(props.row, 2)"
                type="text"
                v-if="parArray.indexOf('trademarkEdit') != -1"
                >编辑</el-button
              >
              <el-button
                @click="relevance(props.row, 1)"
                type="text"
                v-if="parArray.indexOf('relevanceCommercial') != -1"
                >关联商户号</el-button
              >
              <!-- <el-button @click="handleState(props.row)"
                                   type="text"
                                   size="small">{{props.row.status==1?'上架':'下架'}}</el-button> -->
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage1"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalNum"
              prev-text="上一页"
              next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </div>
      <div style="height: 40px"></div>
    </div>
    <!-- 分页start -->

    <!-- 分页end -->
    <!-- 新增类目/编辑 -->
    <el-dialog
      :title="amendtitle"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        status-icon
        ref="classifyRuleForm"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
      >
        <el-form-item label="品牌名称" prop="name" label-width="90px">
          <el-input
            type="text"
            placeholder="请输入产品品牌名称"
            v-model="ruleForm.name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="英文名" prop="endangerName" label-width="90px">
          <el-input
            type="text"
            placeholder="请输入英文名"
            v-model="ruleForm.endangerName"
            autocomplete="off"
            @keyup.native="
              ruleForm.endangerName = ruleForm.endangerName.replace(
                /[^a-zA-Z]/g,
                ''
              )
            "
          ></el-input>
        </el-form-item>
        <el-form-item label="关联商户号" label-width="90px">
          <el-select
            v-model="ruleForm.wxconfigId"
            placeholder="选择关联商户号"
            filterable
            clearable
            default-first-option
          >
            <el-option
              v-for="item in brandList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属类目"
          prop="brandCategoryList"
          label-width="90px"
        >
          <el-cascader
            v-model="ruleForm.brandCategoryList"
            :options="options"
            :props="{
              label: 'categoryName',
              value: 'id',
              multiple: true,
            }"
            collapse-tags
            clearable
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

        <!-- <div v-if="state == 2" style="padding-left: 101px">
          {{ getTextByJs(rowBrandCategoryList) }}
        </div> -->
        <el-form-item label="是否上架" prop="status" label-width="90px">
          <el-radio-group v-model="ruleForm.status">
            <el-radio label="A">上架</el-radio>
            <el-radio label="S">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="btnBox">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitForm('classifyRuleForm')"
            >确定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <!-- 批量关联商户号 -->
    <el-dialog
      :title="titleCommercial"
      :visible.sync="dialogVisibleInput"
      width="500px"
      :before-close="handleCloseInput"
      :append-to-body="true"
    >
      <el-form ref="form" label-width="100px">
        <el-form-item label="关联商户号">
          <el-select
            v-model="defWechatMchId"
            placeholder="关联商户号"
            filterable
            clearable
            default-first-option
          >
            <el-option
              v-for="item in brandList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <div class="Commercial">
          <el-button @click="handleCloseInput">取 消</el-button>
          <el-button type="primary" @click="handleCloseConfirm"
            >确 定</el-button
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      title="下架"
      :append-to-body="true"
      :visible.sync="dialogVisibleForbidden"
      width="25%"
      :before-close="handleCloseForbidden"
    >
      <div class="dialogText">
        <h3 style="font-zise: 18">是否确定下架品牌</h3>
        <p style="color: #999999">
          是否确定下架品牌，下架后该品牌<span style="color: #f15043"
            >所有支付方式及商品</span
          >将同时下架
        </p>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="handleCloseForbidden">取 消</el-button>
        <el-button type="primary" @click="forbiddenBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import levelAddr from '@/components/levelAddr'
import $ from 'jquery'
export default {
  components: {
    levelAddr,
  },
  data () {
    return {
      rules: {
        name: [
          { required: true, message: '请输入品牌名称', trigger: 'blur', },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur', },
        ],
        endangerName: [
          { required: true, message: '请输入品牌英文名', trigger: 'blur', },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur', },
        ],
        brandCategoryList: [
          { required: true, message: '请选择所属类目', trigger: 'blur', },
        ],

      },
      options: [],
      dialogVisible: false,
      dialogVisibleForbidden: false,
      dataList: [],
	  loading:false,
      totalNum: 0,
      Administrator: '',
      authority: '',
      checked: false, //物流选择
      logFile: '',
      activeName: '-1',
      user_id: sessionStorage.getItem('user_id'),
      date: [],
      date1: [],
      date2: [],
      expends: [],
      queryForm: {
        wxconfigId: '', //商户号名称
        name: '', //产品品牌
        endangerName: '', //产品品牌英文名
        id: '', //类目
      },
      loginsId: '',
      currentPage1: 1,
      pageSize: 10,
      leadingIn: false, //物流导入弹框
      tableData: [],
      customer: [],
      beginTime: '',
      endTime: '',
      multipleSelection: [],
      salesAuthorityId: JSON.parse(
        sessionStorage.getItem('salesAuthorityId')
      ),
      limits: '',
      parArray: [],
      height: '500px',
      ifreamDom: [],
      leadingInLive: false,
      ImportLove: false,
      brandList: '', //品牌下拉
      states: [
        {
          value: '全部',
          status: null,
        },
        {
          value: '上架',
          status: 0,
        },
        {
          value: '已下架',
          status: 1,
        },
      ], //状态
      state: '', //1新增，2编辑
      ruleForm: {
        name: '',
        endangerName: '',
        wxconfigId: '',
        status: '',
        brandCategoryList: "",
      },

      dialogVisibleInput: false, //关联商户号
      defWechatMchId: '', //关联商户号弹框选中id
      relevanceId: '', //按钮关联商户号
      relevanceState: "",
      titleCommercial: '',
      amendtitle: '',
      stateId: "",
      addBrand: [],//用于点击新增品牌存储类目数据
      rowBrandCategoryList: [],//用于编辑弹框类目选择展示数据
    }
  },
  created () {
    // 查询订单统计列表
    // this.getOrderList()
    this.getBrandList()
    this.getDataList()
    this.getCategoryDate()

    // this.defaultDate()//这是时间选择默认时间
    this.authority = sessionStorage.getItem('role')
    this.Administrator = JSON.parse(
      sessionStorage.getItem('userInfo')
    ).userType
    console.log(this.Administrator)
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'brandList'
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    // 权限设定判断
    if (
      this.salesAuthorityId == 2 &&
      sessionStorage.getItem('positionCode') != 'manager'
    ) {
      //判断是否默认选中客户
      this.queryForm.service = JSON.parse(
        sessionStorage.getItem('user_id')
      )
    } else {
      this.queryForm.service = ''
    }

    //微商1 客服2
    if (!this.is_null(this.$route.query.activeName)) {
      this.activeName = this.$route.query.activeName
    } else if (!this.is_null(sessionStorage.getItem('activeName'))) {
      this.activeName = sessionStorage.getItem('activeName') //this.$route.query.activeName;
    } else {
      this.activeName = '-1'
    }

    let _this = this
    document.onkeydown = function (e) {
      let key = window.event.keyCode
      if (key == 13) {
        _this.searchEvent()
      }
    }
    console.log(this.date)
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },
  activated () {
    if (!this.is_null(this.$route.query.activeName)) {
      this.activeName = this.$route.query.activeName
    } else if (!this.is_null(sessionStorage.getItem('activeName'))) {
      this.activeName = sessionStorage.getItem('activeName') //this.$route.query.activeName;
    }
  },
  beforeRouteLeave (to, from, next) {
    this.allIfreamHide()
    next()
  },

  methods: {
    // 关联商户号选择直接出发搜索
    handleSelect (e) {
      this.queryForm.defWechatMchId = e
      this.getDataList()
    },

    // 所属类目展示数据拼接
    getTextByJs (arr) {
      var str = "";
      for (var i = 0; i < arr.length; i++) {
        str += arr[i].categoryName + "、";
      }
      //去掉最后一个逗号(如果不需要去掉，就不用写)
      if (str.length > 0) {
        str = str.substring(0, str.length - 1);
      }
      return str;

    },
    // 所属类目
    handleChange (e) {
      // console.log(this.ruleForm.brandCategoryList, "ruleForm.brandCategoryList")
      // let data = []
      console.log(e, "新增分类级联选择的值")
      // e.map(item => {
      //   console.log(item[item.length - 1], "item")
      //   this.addBrand.push(item[item.length - 1])
      // })

    },
    handleChangeSearch (e) {
      console.log(e)
      this.queryForm.id = e[e.length - 1]
      this.searchEvent()
    },
    handleCloseForbidden () {
      this.dialogVisibleForbidden = false
    },
    // 下架确定
    forbiddenBtn () {
      this.axios
        .get(`/order/comm/commtype/disable?id=${this.stateId}`)
        .then((res) => {
          if (res.code == 0) {
            this.getDataList()
            this.dialogVisibleForbidden = false
          } else {
            this.$message.error(res.message)
            this.dialogVisibleForbidden = false
          }
        })

    },
    // 批量关联商户号
    batch (e) {
      this.relevanceState = e
      this.defWechatMchId = ''
      this.titleCommercial = '批量关联商户号'
      if (this.multipleSelection.length) {
        this.dialogVisibleInput = true
      } else {
        this.$message.error('请勾选数据')
      }
    },
    // 重置
    reset () {
      this.queryForm = {}
      this.getDataList()
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.state == 1) {
            this.addBrand = []
            console.log(this.ruleForm.brandCategoryList, "this.ruleForm.brandCategoryList")
            this.ruleForm.brandCategoryList.map((item) => {
              if (item.length >= 3) {
                this.addBrand.push(item[item.length - 1])
              }
            })
            const data = {
              name: this.ruleForm.name,
              endangerName: this.ruleForm.endangerName,
              // wxconfigId: this.ruleForm.wxconfigId,
              wxconfigId: 1,
              status: this.ruleForm.status,
              brandCategoryList: this.addBrand,
            }
            this.$api.brandAdd(data).then((res) => {
              if (res.code == 0) {
                console.log(res)
                this.getDataList()
                this.dialogVisible = false
                this.$message.success('操作成功！')
              } else {
                this.$message.error("操作失败！")
              }
            }).catch((err) => { console.log(err) })

          } else {
            this.addBrand = []
            this.ruleForm.brandCategoryList.map((item) => {

              // if (item.length >= 3) {
              this.addBrand.push(item[item.length - 1])
              // }
            })
            const data = {
              name: this.ruleForm.name,
              endangerName: this.ruleForm.endangerName,
              wxconfigId: this.ruleForm.wxconfigId,
              status: this.ruleForm.status,
              brandCategoryList: this.addBrand,

              id: this.id
            }
            this.$api.brandEdit(data).then((res) => {
              if (res.code == 0) {
                console.log(res)
                this.getDataList()
                this.dialogVisible = false
                this.$message.success('操作成功！')
              } else {
                this.$message.error("操作失败！")
              }
            }).catch((err) => { console.log(err) })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    // 批量关联商户号关闭
    handleCloseInput () {
      this.dialogVisibleInput = false
    },
    // 关联商户号确定
    handleCloseConfirm () {
      if (this.relevanceState == 1) {
        let idList = [this.relevanceId]
        this.axios
          .post('/order/comm/commtype/bindWechatMch', {
            ids: idList,
            defWechatMchId: this.defWechatMchId,
          })
          .then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.multipleSelection = []
              idList = []
              this.getDataList()
              this.dialogVisibleInput = false
              this.$message.success('关联成功')
            } else {
              this.$message.error(res.message)
            }
          })
      } else {
        let idList = []
        if (this.multipleSelection.length) {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            idList.push(this.multipleSelection[i].id)
          }
          this.axios
            .post('/order/comm/commtype/bindWechatMch', {
              ids: idList,
              defWechatMchId: this.defWechatMchId,
            })
            .then((res) => {
              console.log(res)
              if (res.code == 0) {
                this.multipleSelection = []
                idList = []
                this.getDataList()
                this.dialogVisibleInput = false
                this.$message.success('关联成功')
              } else {
                this.$message.error(res.message)
              }
            })
        } else {
          console.log(idList, '单选的')
        }
      }
    },
    // 关联商户号
    relevance (row, e) {
      this.relevanceState = e
      console.log(row)
      this.titleCommercial = '关联商户号'
      this.dialogVisibleInput = true
      this.defWechatMchId = ''
      this.relevanceId = row.id
    },
    // 上架/下架
    handleState (row) {

      console.log(row)
      if (row.status == 1) {
        this.axios
          .get(`/order/comm/commtype/enable?id=${row.id}`)
          .then((res) => {
            if (res.code == 0) {
              this.getDataList()
              this.$message.success("上架成功")
            } else {
              this.$message.error(res.message)
            }
          })
      } else {
        this.dialogVisibleForbidden = true;
        this.stateId = row.id;
      }
    },
    handleClick (row, e) {
      this.amendtitle = '编辑'
      console.log(row, e, "row税局")
      this.rowBrandCategoryList = []
      this.ruleForm.brandCategoryList = ""
      this.state = e
      this.id = row.id
      if (this.state == 2) {
        this.dialogVisible = true

        this.ruleForm.wxconfigId = row.wxconfigId + ''
        this.ruleForm.endangerName = row.endangerName
        this.ruleForm.name = row.name
        this.ruleForm.status = row.status
        // this.rowBrandCategoryList = row.commodityCategoryList
        row.commodityCategoryList.map((item) => {
          console.log(item.parentIdList, "itema")
          this.rowBrandCategoryList.push(item.parentIdList)
        });
        this.ruleForm.brandCategoryList = this.rowBrandCategoryList
        this.$nextTick(() => {
          this.$refs['classifyRuleForm'].clearValidate()

        })

        console.log(this.rowBrandCategoryList, " this.ruleForm.brandCategoryList")
      }

    },
    getCategoryDate () {
      const params = {
        pageSize: 10000,
      }
      this.$api.brandDate(params).then((res) => {
        console.log(res, "res")
        if (res.code == 0) {
          this.options = res.data.list
        }
      }).catch((err) => { console.log(err) })
    },
    //   表格数据列表
    getDataList () {
		this.loading = true;
      const params = {
        name: this.queryForm.name,
        pageNo: this.currentPage1,
        pageSize: this.pageSize,
        endangerName: this.queryForm.endangerName,
        categoryId: this.queryForm.id
      }
      this.$api.brandList(params).then((res) => {
        console.log(res, "表格数据列表")
        if (res.code == 0) {
          this.dataList = res.data.list
          this.totalNum = res.data.totalNum
        } else {
          this.$message.error(res.message)
        }
		this.loading = false;
      }).catch((err) => { console.log(err) })
	  this.loading = false;
      // this.axios
      //   .post('/order/comm/commtype/selectCommTypeBycode', {
      //     defWechatMchId: this.queryForm.defWechatMchId,
      //     name: this.queryForm.name,
      //     pageNo: this.currentPage1,
      //     pageSize: this.pageSize,
      //     status: this.queryForm.states,
      //     id: '10000',
      //     fenName: this.queryForm.fenName,
      //   })
      //   .then((res) => {
      //     console.log(res)
      //     if (res.code == 0) {
      //       this.dataList = res.data.list
      //       this.totalNum = res.data.totalNum
      //     } else {
      //       this.$message.error(res.message)
      //     }
      //   })
    },
    //   新增商户号
    addCommercial (e) {
      this.addBrand = []
      this.amendtitle = '新增'
      this.ruleForm.name = ''
      this.ruleForm.endangerName = ''
      this.ruleForm.wxconfigId = ''
      this.ruleForm.status = 'A'
      this.ruleForm.brandCategoryList = ""
      this.state = e
      this.dialogVisible = true
      this.$refs['classifyRuleForm'].clearValidate()

    },
    //   关闭
    handleClose (done) {
      done()
    },
    // s商户号数据
    getBrandList () {
      this.axios.get('/pay/wechatMch/selectOption').then((res) => {
        console.log(res)
        this.brandList = res.data
        console.log(this.brandList)
      })
    },

    allIfreamHide () {
      $('.parcelNumberBorder').hide()
    },

    handleCurrentChange (val) {
      this.currentPage1 = val
      this.getDataList()
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.getDataList()
    },

    //** 查询流程 **//

    // 搜索事件
    searchEvent: _.debounce(function () {
      this.currentPage1 = 1
      this.getDataList()
    }, 300),



    is_null (content) {
      if (content) {
        return false
      } else {
        return true
      }
    },
    returnGoods (e) {
      this.$router.push({
        path: 'applyReturnGoods',
        query: {
          id: e.orderUser.orderIdStr,
        },
      })
    },


  },
}
</script>

<style scoped lang="scss">
/deep/.el-table--body {
  width: 100% !important;
}
.content {
  margin-bottom: 20px;
  padding: 20px 0 0px 20px;
  background-color: #ffffff;
  h2 {
    position: relative;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-bottom: 20px;
    &:before {
      position: absolute;
      top: 4px;
      left: 0;
      display: inline-block;
      content: "";
      width: 3px;
      height: 20px;
      background-color: #2d7edf;
    }
  }
  .btn-list {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
  }
}
.btnBox {
  display: flex;
  justify-content: right;
}
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}

.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
/deep/.el-badge {
  margin-top: -2px;
  /deep/.el-badge__content {
    top: 7px;
  }
}
.dialogText {
  padding: 0px 55px;
}
/deep/.el-dialog {
  border-radius: 10px;
}

/deep/.el-table .el-cell {
  white-space: inherit;
  width: 100% !important;
}
/deep/.is-leaf {
  color: #2d7ddf;
  text-align: center;
}

/deep/.el-table .cell {
  text-align: center;
}

/deep/.el-cascader--mini {
  width: 350px;
}

/deep/.el-header--column {
  color: #2d7ddf;
}

/deep/.table .el-body--row {
  background: #ebf0f9;
  color: #000;
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  box-sizing: border-box;
}

/deep/.el-dialog__headerbtn {
  top: 15px;
}

/deep/.el-dialog__headerbtn .el-dialog__close {
  color: #fff;
}

/deep/.distpicker-address-wrapper select {
  padding: 0rem 0.75rem;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}

/deep/ .expanded {
  background: #ebf0f9;
  color: #000;
}

/deep/.el-table__expanded-cell[class*="cell"] {
  padding: 0px 50px;
}

.header {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
  span {
    font-size: 15px;

    color: #333;
  }
  p {
    font-size: 12px;
    color: #2d7edf;
  }
  p:hover {
    cursor: pointer;
  }
}
/deep/.el-tabs__header {
  margin: 0;
}
.inquiry {
  background: #fff;
  padding: 10px;
  margin-top: 10px;
}

.table {
  margin: 10px 0 0px;
  overflow-x: hidden;
  border: 1px solid #ebeef5;

  /deep/ .el-input--suffix .el-input__inner {
    background: #409eff;
    color: #fff;
    width: 104px;
    box-shadow: none;
  }
}

.page {
  // margin: 20px 0;
  padding-right: 20px;
  text-align: right;
  width: 98%;
  position: fixed;
  bottom: 0;
  right: 0;
  background: #f5f5f5;
  z-index: 100;

  span {
    font-size: 15px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
  }

  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }

  /deep/.el-input--suffix .el-input__inner {
    background: #fff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
}

// /deep/.el-form-item {
//     margin-bottom: 6px;
// }

/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}

.btn {
  span {
    display: inline-block;
    color: rgb(45, 125, 223);
    margin-right: 10px;
  }
}

.btn:hover {
  cursor: pointer;
}
.boxBtns {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
.active {
  color: red;
}
.activess {
  color: #12ab62;
}
.manage {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  .header {
    font-size: 18px;
  }
}
.Commercial {
  display: flex;
  justify-content: right;
  margin-top: 25px;
}
</style>